<template>
  <div class="footer">
    <h3 class="footertit">联系我们</h3>
    <el-row class="bottom">
      <el-col :span="8" class="bottomitem">
        <div>电话:</div>
        <div>{{ link }}</div>
      </el-col>
      <el-col :span="8" class="bottomitem">
        <div>邮箱:</div>
        <div>{{ email }}</div>
      </el-col>
      <el-col :span="8" class="bottomitem">
        <div>地址:</div>
        <div>{{ address }}</div>
      </el-col>
    </el-row>

    <div class="row3">
      <span><a href="javascript:;" title="123">服务条款</a></span>
      <span><a href="javascript:;">隐私政策</a></span>
      <span><a href="javascript:;">Cookie策略</a></span>
    </div>
    <div style="width:470px;margin:0 auto; padding:20px 0; ">
      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=14010902000900" style="display:inline-block;text-decoration:none;height:20px;line-height:20px; ">
        <img src="@/assets/beian.png" style="float:left;" />
        <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#cccccc;">晋公网安备: 14010902000900号</p>
        <p style="float:right;height:20px;line-height:20px;margin: 0px 0px 0px 10px; color:#cccccc;"><a target="_blank" style="display:inline-block;text-decoration:none;color: #cccccc;" href="https://beian.miit.gov.cn/#/Integrated/index"> 晋ICP备: 2021012370号-1</a></p></a
      >
    </div>
  </div>
</template>

<script>
export default {
  name: 'Footer',
  data() {
    return {
      link: '',
      email: '',
      address: ''
    }
  },
  mounted() {
    this.getWebInfo()
  },
  methods: {
    getWebInfo() {
      this.axios
        .get('/api/bdweb/webinfo')
        .then(res => {
          this.link = res.data.data.link
          this.email = res.data.data.email
          this.address = res.data.data.address
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

<style>
.footer {
  width: 1920px;
  height: 348px;
  background: #0594fe;
  box-shadow: 0px 0px 12px 0px rgba(204, 204, 204, 0.61);
  box-sizing: border-box;
}
.footertit {
  padding: 50px 0 53px 253px;
  font-size: 40px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  line-height: 30px;
}
.bottom {
  width: 1520px;
  margin: 0 auto;
}
.bottom .bottomitem {
  display: flex;
  align-items: center;

  font-size: 30px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  line-height: 30px;
}
.bottomitem > div:nth-child(2) {
  padding-left: 20px;
}
.row3 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 90px;
  margin-bottom: 0px;
}
.row3 span {
  padding: 0 24px;
  border-right: 1px solid #fff;
}
.row3 span:last-child {
  border: none;
}
span a {
  text-decoration: none;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 300;
  color: #cccccc;
  line-height: 30px;
}
span a:hover {
  text-decoration: underline;
}
</style>
